<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="listQuery" class="demo-form-inline">
        <el-form-item label="手机id">
      <el-input
        v-model="listQuery.search"
        placeholder="搜素手机id"
        style="width: 220px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
    </el-form-item>
    <el-form-item label="渠道">
      <el-input
        v-model="listQuery.qd"
        placeholder="渠道"
        style="width: 220px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
    </el-form-item>
    <el-form-item label="包">
           <el-select
            v-model="listQuery.package_name"
            style="width: 100%"
            class="filter-item"
            filterable
            @change="handleFilter"
          >
          <el-option label="全部包" :value="''" />
          <el-option v-for="(v, k) in pkgs" :key="k" :label="v" :value="k" />
          </el-select>
        </el-form-item>

      <el-form-item label="厂商">
           <el-select
            v-model="listQuery.brand"
            style="width: 100%"
            class="filter-item"
            @change="handleFilter"
          >
            <el-option key="100" label="所有厂商" value=""></el-option>
            <el-option
              v-for="(k,v, index) in optionBrandName"
              :key="index"
              :label="v"
              :value="k"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
           <el-select
            v-model="listQuery.block_type"
            style="width: 100%"
            class="filter-item"
            @change="handleFilter"
          >
            <el-option key="100" label="全部" value=""></el-option>
            <el-option
              v-for="(k,v, index) in block_type"
              :key="index"
              :label="k"
              :value="v"
            />
          </el-select>
        </el-form-item>

        <el-form-item  label="日期选择">
           <el-date-picker
            v-model="listQuery.filters2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="filter-item pickertime"
            format="yyyy-MM-dd"
            value-format="timestamp"
            :picker-options="pickerOptions"
            @change="handleFilter"
          />
        </el-form-item>

        <el-form-item>
      <el-button
        plain
        size="small"
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >搜索</el-button
      >
    </el-form-item>
      <el-form-item>
      <el-button
        plain
        size="small"
        v-waves
        class="filter-item btn"
        type="primary"
        icon="el-icon-refresh"
        @click="handleCancel"
        >重置</el-button
      >
    </el-form-item>
      </el-form>
    </div>
    <div style="padding-bottom: 10px">

      <el-link type="primary" style="padding-right: 20px;">黑名单总数量: {{ all_total }}</el-link>
      <el-button
        plain
        size="small"
        v-waves
        class="filter-item btn"
        type="primary"
        @click="onAsync"
        :loading="black_async"
        >同步黑名单</el-button
      >
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        align="center"
        prop="id"
        width="60"
        type="index"
      />
      <el-table-column label="手机唯一id" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.mobile_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="包名" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ pkgs[row.pkg]}}</span>
        </template>
      </el-table-column>
      <el-table-column label="渠道名称" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{row.qd}}</span>
        </template>
      </el-table-column>
      <el-table-column label="厂商" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.brand }}</span>
        </template>
      </el-table-column>
      <el-table-column label="拉黑类型" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ block_type[row.type_] }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="提交次数" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.sum }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="创建时间" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ time_format(row.time_) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注/拉黑原因" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="danger" plain size="small" @click="oonDelete(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      class="pageShow"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.page_size"
      @pagination="getList"
    />

  </div>
</template>

<script>
import { getBlickList, delBlickList } from "@/api/admin/admin";
import { getPkgList} from "@/api/adv_admin/config"
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { Message, MessageBox } from "element-ui";
import {pkgs, brand1} from '@/utils/index'
export default {
  name: "Control",
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: [],
      total: 0,
      block_type: {},
      all_total: 0,
      listLoading: true,
      acc: "",
      pwd: "",
      pri: "",
      listQuery: {
        page: 1,
        page_size: 20,
        search:"",
        qd: "",
        package_name: "",
        brand: "",
        block_type: '',
        filters2: "",
      },
      pkgs:{},
      optionBrandName: brand1,
      passwordType: "password",
      capsTooltip: false,
      dialogFormVisible: false,
      dialogStatus: "",
      dialogWidth: 0,
      addloading: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      black_async: false
    };
  },
  created() {
    this.getPkgs();
    this.getList();
    this.setDialogWidth();
  },
  mounted() {},
  methods: {
    getPkgs(){
        getPkgList({data_type: '1'}).then((res)=>{
          this.pkgs = res.DATA.list
        })
      },
    setDialogWidth() {
      const val = document.body.clientWidth;
      const def = 600; // 默认宽度
      if (val < def) {
        this.dialogWidth = "100%";
      } else {
        this.dialogWidth = def + "px";
      }
    },
    time_format(shijianchuo) {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(parseInt(shijianchuo) * 1000);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        "-" +
        this.add0(m) +
        "-" +
        this.add0(d) +
        " " +
        this.add0(h) +
        ":" +
        this.add0(mm) +
        ":" +
        this.add0(s)
      );
    },
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    getList() {

      this.listLoading = true;
      getBlickList(this.listQuery).then((response) => {
      
        this.list = response.DATA.list;
        this.total = response.DATA.total;
        this.all_total = response.DATA.all_total
        this.block_type = response.DATA.block_type
        this.listLoading = false;
      });
    },
    handleFilter() {
      if (this.listQuery.filters2) {
        this.listQuery.time_start = this.listQuery.filters2[0] / 1000;
        this.listQuery.time_end = this.listQuery.filters2[1] / 1000 + 3600 * 24 - 1;
      } else {
        this.listQuery.time_start = "";
        this.listQuery.time_end = "";
      }
      // console.log(this.listQuery.time_start, this.listQuery.time_end)
      this.listQuery.page = 1;
      this.getList();
    },
    handleCancel() {
      this.listQuery.page = 1;
      this.listQuery.search = "";
      this.listQuery.package_name = "";
      this.listQuery.qd = "";
      this.listQuery.brand = "";
      this.listQuery.time_end = "";
      this.listQuery.time_start = "";
      this.listQuery.filters2 = ""
      this.listQuery.block_type = ''
      this.getList();
    },
    oonDelete(row) {
      MessageBox.confirm("确定删除吗", "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delBlickList({ mobile_id: row.mobile_id }).then((r) => {
            if (r.STATUS == 200) {
              this.getList();
              Message({
                message: "删除成功",
                type: "success",
                duration: 2000,
              });
            }
          });
        })
        .catch(() => {});
    },
    onAsync(){
      MessageBox.confirm("确定同步吗", "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.black_async = true
          delBlickList({ async: 'acync' }).then((r) => {
              if (r.STATUS == 200) {
                Message({
                  message: "同步成功",
                  type: "success",
                  duration: 2000,
                });
              }
              this.black_async = false
            });
        })
        .catch(() => {});
    }
  },
};
</script>

<style lang="scss" scoped>
.show-pwd {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 16px;
  color: #ccc;
  cursor: pointer;
  user-select: none;
}
.push {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  margin-left: 5px;
}
.pageHidden {
  display: none;
}
.btn {
  margin-left: 0;
}
.fullwidth {
  width: 450px;
  margin-left: 50px;
}
@media (max-width: 550px) {
  .pageShow {
    display: none;
  }
  .pageHidden {
    display: block;
  }
  .fullwidth {
    width: 100%;
    margin-left: 0;
  }
}
</style>
